homepage6047 Top Page

この2つを合体させるとプログラマブルなアニメが実現できて、結構目玉なんです。

左の画像をクリックするとJavaScriptを実行します。

最初に２つの四角がそれぞれの動きで中央に寄ります（アニメ１）。その後、「スライムがあらわれた！」と画面に文字を1文字ずつ表示します（ア ニメ２）。

アニメ１を実行する行は //susupend というコメントがついているので、アニメ１を実行後に自前のエンジンは停止します。そしてアニメ１がアニメを終了すると、「program.resume();」という内 容のcallback関数が呼ばれます。停止していた自前のエンジンが再開され、「スライムがあらわれた！」というアニメ２が実行されます。

これが今回の合体の求める結果です。

しかし、残念ながら「batch」にいくつか下記のような不備があることが分かりました。

RPG開発に必要な合理的なアニメ　のサンプルプログラムです。

将来のプログラムの下ごしらえなプログラムなのでまだイケてないつまらない状態です。

左の画像をクリックすると JavaScript を実行します。

実行すると、赤い四角はぴょんぴょんジャンプして、右側の緑の四角はサイン波状に動きます。また、背景色が白←→黒の変化を繰り返します。

このプログラムのポイントは以下の通り。

• 一連のアニメを合理的にAnmにまとめている。　大きな目的。
• 一連のアニメの終了でcallbackが実行できている。　大きな目的。
  （サンプルではreverseになっていて終了しないのでcallbackは呼ばれません）
  （callbackとは、”プログラム中で、呼び出し先の関数の実行中に実行されるように、あらかじめ指定しておく関数” です）
• 関数での移動ができている。

プログラムリストを表示

今後の開発のどの部分で使うかと言うと…

• SVC(Side View Character)の制御
• RPGの各種イベントの実行
• また、普通のホームページの飾りのアニメとしても使用できます。（汎用的）

SVCの基本的な動作の試作プログラム

左の画像リンクをクリックすると JavaScript プログラムのページを開きます。

ページを開いたら、下部のいくつかのリンクをクリックすると、ヌンチャクみたいなものがいろいろなポーズを取ったり、あちこち動いたりします。

SVCのポーズのエディター

左の画像リンクをクリックすると JavaScript プログラムのページを開きます。

ちょっとかわいい感じの女の子がカッコよく決めているんで一番見栄え（みばえ）がするかもしれないです。

画面左の身体のパーツリストのスライダを動かすと関節が動きます。

いろいろボタンがあって、いくつかの機能を盛り込んでありますが、説明はしていません。

でも、ボタンの名前から機能の動きを ある程度推測できるようにしたつもりです。

SVCのポーズのエディター

左の画像リンクをクリックすると JavaScript プログラムのページを開きます。

上のエディターと同じものですが、ジャンプなどアニメする機能があります。

ただし、作ったポーズを保存してアニメを新しく作る機能はありません。

＜単純なプログラムで、複雑なアニメになる事実＞

あるポーズのデータを決めておいて、別のポーズも決めておきます。前のポーズから後のポーズへ各関節が一斉に同じ時間内で動くと、複雑なアニメ になります―――

スケルトンのプログラムで直立からジャンプすると、だいぶ複雑なアニメーションでびっくりするかもしれませんが、「直立」、「ジャンプ頂点 時」、「着地時」の３つのポーズを作成し、あとは各ポーズの各関節の角度を前ポーズの値から後ポーズの値へと各関節同じ時間内に少しずつ変化させ ているだけなんです。それだけで複雑なアニメになっています。

たとえば、前ポーズで右ひじの角度が30度で、後ポーズが60度、これを3秒でアニメするとしたら、1秒当たり10度動けば前ポーズから後ポー ズへのアニメは完了します。実際は1秒ごとではなく、100msくらいの間隔でアニメしているので、100ms当たり1度動いていることになりま す。そのとき、いっぽうで、例えば右ひざの角度が0度から90度まで同じ3秒で変化するとしたら、100ms当たり3度動きます。そうやって各関 節それぞれ動く量が異なっていますが、アニメが完了する時間は同じになっています。ポーズからポーズへと各関節が一斉に動きます。

各関節は親子関係になっています。「親が30度傾いていたら、子はその30度傾いている状態を0度とします」（これを「相対的な位置関係」と 言ったり、「ローカル座標系」と言ったりします）。たとえば、ひじをのばした状態を0度だとします。そしてひじの親は肩です。肩を90度曲げる と、ひじも一緒に動きますがひじの0度を動かしたわけではないのでひじの角度は0度を保っています。「親である肩が90度傾いたら、子であるひじ はその90度傾いている状態を0度とします」。ひじを90度曲げた状態で肩を90度曲げると、ひじも一緒に動きますがひじの90度は保っていま す。このローカル座標のしくみも、複雑なアニメのモトになっています。（ローカル座標は必ず必要というわけではありません。絶対座標よりも座標計 算が楽になり便利だ、というものです）

この「ローカル座標系」は難しそうに聞こえたかもしれませんが、もっと図を使って順序立てて説明すればわかってもらえる内容だと思います。ロー カル座標系を JavaScript の canvas で実現するには、save(), restore(), translate(), rotate() などのcanvasの関数を使います。そんなに複雑なプログラムにはなりません。ただし、考え方は、これらを使わない通常の画面描画（画面の左上を0,0として座標を指定 する絶対的な描画）と比べるとやや特殊（ローカル座標系の考え方は特殊）なので慣れるまでは勝手が難しいかもしれないです。勝手がわかると、いつ でもどこでもローカル座標系に頼ってしまうほど便利です。

「ゲームの自分史」という表を作ってみました。

子供のころからどんなゲームで遊んできたかを知ることで、私がどういう人物かつかみどころが出てくるんじゃないかとちょっと思ったんですが…。

ひなたぼっこでもしに行こう、と思って近所の砂浜へ行ったら、もう海水浴をやっていました。

ただ波がちょっと粗いように見えました。

自宅から歩いて１分くらいのところにある、通勤路。

毎朝通勤で通るたびにドブ（側溝、そっこう）にゴミがたまっていて、見苦しく、何とかならないかなぁと思っていました。

そういう動機があるので、本日、個人的にクリーンアップを開始することにしました。

大事なのは、その行動が常識の範囲を超えているかどうか、自分でチェックすることです。

私のそのゴミ回収の行動が、はたから見て「異常行動」と取られるかどうかがわりと重要で、その対策として、首の周りに汗対策のハンドタオルを巻 くとか、白いシャツにジーパンといった作業しやすい格好をするとか、トング（一体成型の金属製のつまみ）を持つとか、それっぽい格好をすると良い と思います。または一人ではなく複数人で誘い合って行えばまったく問題ないと思います。人はそういう「ぱっと見」で判断するところがあるからで す。

拾ったごみはこんな感じでした。

誰かが先にちょっと清掃していたのかわかりませんが、ちょっと思ったよりも少なかったです。

それでいいんですけど、張り切っていた分、残念な気も。

週明け、通勤するとき、ゴミがなければ ヨシ！って感じです。

皆さんもやってみてはどうでしょうか？　運動不足解消にもなりますよ。

仕事で疲れていてそんな余力ないよ、というのは勘違いですよ。私も疲れているからです。

どこかゆっくりできるところ（私の場合は砂浜）へ出かけゆっくりドリンクでも飲みながら ひなたぼっこをしてからなら疲れは取れてると思うので、やってみると良いと思うんですが…

この行動は、「土曜日に一人で通勤路の清掃をした」とか「みんなで通学路のゴミ拾いをした」などと言えば人に通じると思います。人に通じる言 葉って大事だと思うので。

1. 開発時通称「batch」

思った通りに動いた！

ちゃんとアニメになっている！

プログラミングをしていて面白いのは、プログラムが自分の思った通りの動きをしてくれることと、それから、新しい動きを目の当たり（まのあた り）にしたときです。

JavaScriptをJavaScriptのエンジンに任せずに、自前のエンジン（？）で実行します。

つまり、JavaScriptを１行１行読んで、if文による分岐や、forやwhileなどの繰り返し、functionやvarなどの宣言 文など、全部自分で動きを作って動作させています。たとえばfor文は、for( i =0; i < 10; i++ ) { ... } のように書きますが、この初期化 i = 0; を実際に　i = 0; とJavaScriptで実行し、 条件部分は、if( i < 10 ) { forブロックの実行を続行 } としていて、加算部分も実際に i++ を自分で実行してfor文の制御を行っています。

どうしてそんなことをするのかと言うと、”行末のコメントに //anm100 と書けばその行を100ミリ秒遅らせて実行する…” ということを実現したいからです。それができると、普通のJavaScriptの１行１行をアニメの命令としてプログラムすることができるようになります。（前にも同じ話 をしたことがあります）

左の画像リンクをクリックするとJavaScriptを実行します。

実行すると、プログラムリストの最後のほうにある、test(), test2() という関数のスクリプトを読み込んで１行１行実行します。JavaScriptコンソールに500ミリ秒のタイミングで「スライムがあらわれた！」と１文字ずつ表示しま す。test(), test2() はそれぞれ普通のJavaScriptの関数ですが、//anm500 のように書かれた部分だけは時間を遅らせて実行するのでアニメーション（今回は文字の出力ですが）になります。ふつうの関数としてJavaScriptのエンジンに実行さ せると、１文字ずつ出力しますが時間を待たずに一気に表示してしまいます。

この //anm500 と書き加えるだけでアニメーションになる、というのはまったく新しい動きで、面白いと思います。

もっとも、JavaScriptのエンジンのほう（JavaScriptのモトであるECMA Scriptを勧告している方々）で、delay() 関数（指定時間何もしないで待つ関数）を用意してくれさえすれば、私がやっている以上のことは必要ないのですが…

プログラムリストを表示

2. 開発時通称「batch - 再帰を平で行う」

上記の「JavaScriptを実行するJavaScript」のために、「再帰処理」を「再帰処理」を使わずにプログラムします。

普通、再帰処理を行うときは、関数の中でその関数自身を呼び出すようなことをしますよね。

たとえば、function test() { ...; test(); ...; } こんな感じで。

「JavaScriptを実行するJavaScript」ではブロック構造を解釈して、入れ子のブロック構造になっているプログラムを１行１行 実行しますが、入れ子に入る際に再帰処理が必要になります（なぜなら入れ子であっても「１行ずつ実行する」といった処理は同じで、そういう場合は 再帰処理となります。たとえば、マトリョーシカを１つ１つ取り出してきれいに磨くという場合、「マトリョーシカを磨く、中のマトリョーシカを取り 出す、この手順を最初から行う」という手順（再帰処理）を実行するとすべてのマトリョーシカを綺麗にできます）。

▲マトリョーシカ（クリックするとPDFを開きます）

ふつう、JavaScriptのエンジンが行っている、関数から関数を呼び…という再帰処理では、その処理の途中で止めて、別のことを行ってか ら再び再帰処理の途中へ戻るというようなことはできません。

しかし、「JavaScriptを実行するJavaScript」の目的の ”行末のコメントに //anm100 と書けばその行を100ミリ秒遅らせて実行する…” を実現するためには、ブロックの中のブロックへという再帰処理を途中で止めて、setTimeout() というJavaScriptの関数を使って 100ミリ秒待ってから再帰処理の途中へ戻る、というようなことが必要なんです（私の考えているやり方では必要）。そこで再帰処理と同じことを再帰処理を使わずに行う方法 （関数の中でその関数を呼ばない）が必要なんです。

そのサンプルがこれです。（でも、あまり気に入った形ではありません）

左上の画像リンクをクリックするとJavaScriptを実行します。

プログラムリストを表示

プログラムリストでは 関数 explorer1() が普通の再帰処理を使った関数で、関数 explorer2() が再帰処理を使わないで同じことをする関数です。階層構造を持ったデータを親子すべて網羅する処理となっています。

explorer2() は再帰処理を途中で止めて少し待ってから続きの処理を行っています。

3. 開発時通称「アニメのサンプル」

下記の３種類の変化を 同時に行いながらアニメするサンプルです。

• 回転しながら右に移動
• ２次関数で縦方向へ移動（放物線運動となる）
• 色を変更

ただし、アニメが終わった後、別のアニメを続いて実行したいという場合、それはどうすればいいのか…。

その解決のために上記の「batch」を作っています。

左の画像リンクをクリックするとJavaScriptを実行します。

プログラムリストを表示

4. 開発時通称「basic SVC」

「Side View Character」、略してSVCのもっともシンプルな基本のプログラムがこれです。

左の画像リンクをクリックするとJavaScriptを実行します。

プログラムリストを表示

5. 開発時通称「basic SVC + moveBy」

上記のサンプルに、”特定のパーツを特定の場所へ移動し、そのパーツを基準に他のパーツを描く” という機能を加えたものです。

たとえば、SVCで人間を作ったとき、足が地面に着地した状態にしたいときにこの機能（moveBy() ）を使います。

左図では緑のパーツが画面の中央に移動し、他のパーツはそれに合わせて位置を移動して全体の形を維持して描かれています。

上記の「basic SVC」のほうでは便利なtranslate()関数を使って「ローカル座標」を実現できるのでシンプルに描画ができます（親子関係のある図を描く際に各パーツが親からの 相対の「ローカル座標」を使用できると、簡潔に描けて便利です。canvasのtranslate()やrotate(), save(), restore() はそれを実現してくれる関数です）が、「basic + moveBy」のほうでは、各パーツの「絶対座標」（CANVASの左上を0,0としたときの座標）がないと同機能（”特定のパーツを特定の場所へ移動し…”）を実現でき ません。

（このように誰かが行っているその人の個人的な研究というのは意味が分からないものだと思いますが、説明しようと思います）

SVC全体を何も考えないで描画したものが上記の「basic SVC」の状態だとして、また、”特定のパーツを特定の場所へ移動” した状態が左図だとします。

緑のパーツに注目すると右下へ少し移動しています。この少しの移動というのは、他のパーツも同じ量だけ移動しているのが図を見比べてわかるで しょうか。

この少しの移動というのがどれくらいなのかが分かれば、”特定のパーツを特定の場所へ移動し、そのパーツを基準に他のパーツを描く”ということ が実現できます。他のパーツも同じだけ移動して描けば良いのですから。

この少しの移動（プログラム中でdiffX, diffYという変数）の算出は、「特定のパーツをどこに移動したいのかという位置（絶対座標）」ー「元の位置=SVC全体を何も考えないで描画した「basic SVC」の状態（の絶対座標）」で算出できます（下記リンクのプログラムリストの138行目で行っています）。この「「basic SVC」の状態（の絶対座標）」を得るために、各パーツの「絶対座標」の計算が必要になります。しかし「basic SVC」のようにtranslate()を使って「ローカル座標」を実現して便利に描いている状態では絶対座標を知る手段が（探しましたが）ありません。これは「親がこの 位置、その回転を考慮、さらにその親がこの位置、その回転を考慮…」と親をさかのぼって相対座標を加算していくというような処理が必要です （115行目のgetAbsolute()メソッド）。この計算は私はくじけそうになりました。

私の毎回のこの手の説明を普通に読んでくれる人って、いないか、いても一人か二人くらいだろうなと思っています。なんせ日本語が苦手な人の文章 ですから。

左の画像リンクをクリックするとJavaScriptを実行します。

プログラムリストを表示